<template>
  <!--
    	作者：offline
    	时间：2018-09-10
    	描述：会计对账
  -->
  <div class="m-view-accountCheckInfo m-window" id="accApp">
    <div class="m-agTable m-bottom">
      <ag-grid-component
        ref="agGridComponent"
        :getColumnDefs="columnDefs"
        :getRowSelection="'multiple'"
        :tableName="'accountBill'"
        :getGridOptions="accountGridOptions"
        :getRowData="rowData"
        :isColFit="true"
        :systemInfo="$systemInfo"
        v-loading="loading"
      ></ag-grid-component>
    </div>
  </div>
</template>

<script>
import _Api from "@/api";
import localeText from "@/i18n/agGridText";
import buttonLink from "@/components/buttonLink.js";
import Msg from "@/public/message.js";
import gridOptions from "lesso-common/public/gridOptions";
export default {
  data() {
    return {
      columnDefs: [],
      accountGridOptions: {},
      rowData: [],
      loading: false,
      headerName: "",
    };
  },
  created() {
    if (this.$global.user.userTypeId == "4") this.headerName = "客户";
    else this.headerName = "公司";
  },
  beforeMount() {
    this.accountGridOptions = Object.assign(
      {
        context: {
          componentParent: this,
        },
        enableColResize: true,
        localeText: localeText,
        enableFilter: true, //列过滤器
        enableSorting: true, //列排序
        animateRows: true, //排序动画
        //suppressRowClickSelection: true, //jjc
        //   getContextMenuItems: this.getContextMenuItems
      },
      gridOptions({
        dragSelectCheckbox: true,
        singleSelection: true,
        operation: true,
      })
    );
    let setCellStyle = (pramas) => {
      const { retFlag, billState } = pramas.data;
      // 退回的会计对账单行背景变为黄色
      if (retFlag == 1 && billState == 1) {
        return { backgroundColor: "#FFFF00" };
      } else {
        return { backgroundColor: null };
      }
    };
    this.columnDefs = [
      {
        headerName: "会计对账单号",
        field: "accountNo",
        width: 160,
        cellRenderer: buttonLink,
        cellStyle: setCellStyle,
        checkboxSelection: true,
        headerCheckboxSelection: true,
      },
      {
        headerName: this.headerName,
        field: "companyName",
        width: 200,
        cellStyle: setCellStyle,
        tooltipField: "companyName",
      },
      {
        headerName: "供应商",
        field: "supplierName",
        width: 250,
        cellStyle: setCellStyle,
        tooltipField: "supplierName",
      },
      { headerName: "期初", field: "sapOpenBalance", width: 120, hide: true },
      { headerName: "应付", field: "sapDebitSum", width: 120, hide: true },
      { headerName: "已付", field: "sapLendSum", width: 120, hide: true },
      {
        headerName: "余额",
        field: "sapBalance",
        width: 120,
        cellRenderer: function(params) {
          if (params.value)
            return params.value
              .toString()
              .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
          else return params.value;
        },
        hide: true,
      },
      {
        headerName: "发票金额",
        field: "invoiceMoneySum",
        width: 120,
        cellStyle: setCellStyle,
        cellRenderer: function(params) {
          if (params.value)
            return params.value
              .toString()
              .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
          else return params.value;
        },
      },
      {
        headerName: "申请人",
        field: "creator",
        width: 100,
        cellStyle: setCellStyle,
        tooltipField: "creator",
      },
      {
        headerName: "申请日期",
        field: "createDate",
        width: 100,
        cellStyle: setCellStyle,
        cellRenderer: function(params) {
          if (params.value) {
            return new Date(params.value).Format("yyyy-MM-dd");
          }
        },
      },
      {
        headerName: "单据状态",
        field: "billState",
        width: 100,
        cellStyle: setCellStyle,
        cellRenderer: function(params) {
          if (params.value == "1") return '<span class="ag-icon">保存</span>';
          else if (params.value == "2")
            return '<span class="ag-icon">提交</span>';
          else if (params.value == "3")
            return '<span class="ag-icon">已确认</span>';
          else if (params.value == "4")
            return '<span class="ag-icon">已审核</span>';
          else if (params.value == "9")
            return '<span class="ag-icon">已过期</span>';
        },
      },
      {
        headerName: "确认人",
        field: "confirmer",
        width: 100,
        cellStyle: setCellStyle,
      },
      {
        headerName: "确认日期",
        field: "confirmDate",
        width: 100,
        cellStyle: setCellStyle,
        cellRenderer: function(params) {
          if (params.value) {
            return new Date(params.value).Format("yyyy-MM-dd");
          }
        },
      },
      {
        headerName: "审批人",
        field: "auditor",
        width: 100,
        cellStyle: setCellStyle,
      },
      {
        headerName: "审批日期",
        field: "auditDate",
        width: 100,
        cellStyle: setCellStyle,
        cellRenderer: function(params) {
          if (params.value) {
            return new Date(params.value).Format("yyyy-MM-dd");
          }
        },
      },
      {
        headerName: "是否存在不符",
        field: "unConFlag",
        width: 120,
        cellStyle: setCellStyle,
        cellRenderer: function(params) {
          if (params.value == "1") return '<span class="ag-icon">是</span>';
          else return '<span class="ag-icon">否</span>';
        },
      },
    ];
  },
  methods: {
    getContextMenuItems() {
      return [];
    },
    // 设置表格列
    setColumnDefs() {
      this.$refs["agGridComponent"].gridOptions.api.setColumnDefs(
        this.columnDefs
      );
    },
    getDataRows(msg) {
      this.$refs.agGridComponent.gridOptions.api.setRowData(msg);
      //   this.accountGridOptions.api.setRowData(msg);
      //   let allColumnIds = [];
      //   this.accountGridOptions.columnApi.getAllColumns().forEach(function (column) {
      //     allColumnIds.push(column.colId);
      //   });
      //this.accountGridOptions.columnApi.autoSizeColumns(allColumnIds);
    },
    getSelectedRow() {
      var row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
      if (row.length <= 0) {
        Msg.showPopMsg("提示：请选择需要删除的数据");
        return;
      }
      var that = this;
      this.$confirm("是否确认删除该数据？", "消息提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        distinguishCancelAndClose: true,
      })
        .then(() => {
          var id = "";
          for (var i = 0; i < row.length; i++) {
            id += row[i].id + ",";
          }
          id = id.substr(0, id.length - 1);
          var obj = {
            id: id,
            modifyer: this.$global.user.loginName,
            modifyerId: this.$global.user.id,
            state: 1,
          };
          _Api
            .deleteMyAccountList(obj)
            .then(function(response) {
              var data = response.data;
              if (data.code == "1") {
                Msg.showSuccessMsg("操作成功");
                that.$refs.agGridComponent.gridOptions.api.updateRowData({
                  remove: row,
                });
              } else {
                Msg.showErrorMsg(data.info);
              }
            })
            .catch((err) => {
              Msg.showErrorMsg(err.data.message);
            });
        })
        .catch(() => {});
    },
    setClickValue(value) {
      this.$emit("getClickValue", value.data);
    },
    auditSelectedRows() {
      var row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
      if (row.length <= 0) {
        Msg.showPopMsg("提示：请选择需要审核的数据");
        return;
      }
    },
    abandonSelectedRows() {
      var row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
      if (row.length <= 0) {
        Msg.showPopMsg("提示：请选择需要弃审的数据");
        return;
      }
    },
  },
  mounted() {
    var userTypeId = this.$global.user.userTypeId;
    if (userTypeId) {
      if (userTypeId == 4) {
        //供应商
        this.columnDefs.splice(2, 1); //不显示供应商列 jjc
        //					this.headerName = "客户";
      } else {
        //					this.headerName = "公司";
        //this.columnDefs.splice(1,1); //不显示公司列
        //this.columnDefs.splice(2,1);
      }
    }
  },
};

Date.prototype.Format = function(fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "H+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};

function singleClickEditRenderer() {}
singleClickEditRenderer.prototype.init = function(params) {
  var template =
    '<span><button id="theValue" class="rendererClass">' +
    params.value +
    "</button></span>";
  var tempDiv = document.createElement("div");
  tempDiv.innerHTML = template;
  this.eGui = tempDiv.firstElementChild;

  this.params = params;
  this.eValue = this.eGui.querySelector("#theValue");
  this.eValue.innerHTML = params.value;
  // this.eButton = this.eGui.querySelector("#theButton");
  this.buttonClickListener = this.onButtonClicked.bind(this);
  this.eValue.addEventListener("click", this.buttonClickListener);
};

singleClickEditRenderer.prototype.onButtonClicked = function(event) {
  //   var value = this.params.value;
  accApp.__vue__.setClickValue(this.params.data);
};

singleClickEditRenderer.prototype.createGui = function() {};

singleClickEditRenderer.prototype.getGui = function() {
  return this.eGui;
};

singleClickEditRenderer.prototype.afterGuiAttached = function() {};

singleClickEditRenderer.prototype.destroy = function() {};

singleClickEditRenderer.prototype.isPopup = function() {
  return false;
};
</script>
